<template>
  <Card dis-hover :bordered="false">
    <Row :gutter="16" type="flex">
      <Col class="ivu-mb-16">
        <DatePicker
          :editable="false"
          type="daterange"
          v-model="timedate"
          :options="options"
          placeholder="消费日期"
          @on-change="changeDatatime"
        >
        </DatePicker>
      </Col>
      <Col class="ivu-mb-16">
        <Input
          v-width="160"
          placeholder="请输入姓名"
          v-model="params.keywords"
          @on-clear="searchData"
          @on-enter="searchData"
          clearable
        />
      </Col>
      <Col class="ivu-mb-16">
        <Select
          v-width="120"
          placeholder="代言人"
          v-model="params.spoker_id"
          :filterable="spokerList.length >= 10"
          @on-open-change="showAll"
          @on-change="searchData"
          clearable
        >
          <Option
            v-for="item in spokerList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </Col>
    </Row>
    <Table
      :columns="columns"
      :data="list"
      :loading="loading"
      @on-sort-change="sortChange"
      :max-height="tableHeigth"
    >
      <template #status="{ row }">
        <Badge
          status="success"
          :text="row.status_name"
          v-if="row.status === '1'"
        />
        <Badge status="error" :text="row.status_name" v-else />
      </template>
    </Table>
    <Page
      class="ivu-mt-16"
      :total="total"
      :modelValue="params.current"
      :page-size="params.size"
      :page-size-opts="pageOpts"
      show-total
      show-sizer
      @on-change="changePage"
      @on-page-size-change="changepageSize"
    />
  </Card>
</template>
<script>
import { feeList } from "@api/fee.js";
import dayjs from "dayjs";
export default {
  name: "consume",
  data() {
    return {
      tableHeigth: document.body.clientHeight - 270,
      timedate: [],
      options: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        },
      },
      params: {
        pay_time_stime: "",
        pay_time_etime: "",
        keywords: "",
        spoker_id: "",
        current: 1,
        size: 10,
        order_column: "",
        order_sort: "",
      },
      spokerList: [],
      total: 0,
      pageOpts: [10, 20, 30, 40],
      columns: [
        {
          key: "name",
          title: "客户",
          width: 120,
        },
        {
          key: "item_name",
          title: "项目",
          minWidth: 280,
          tooltip: true,
          tooltipMaxWidth: 600,
        },
        {
          key: "shop_name",
          title: "门店",
          width: 160,
        },
        {
          key: "actual_price",
          title: "收费金额",
          width: 100,
        },
        {
          key: "pay_time",
          title: "消费日期",
          width: 170,
        },
        {
          key: "doctor_name",
          title: "医生",
          width: 180,
        },
        {
          key: "spoker_name",
          title: "代言人",
          width: 120,
        },
      ],
      list: [],
      loading: false,
      btnLoading: false,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    changeDatatime() {
      this.askDatatime();
    },
    askDatatime() {
      this.params.pay_time_stime = this.timedate[0]
        ? dayjs(this.timedate[0]).format("YYYY-MM-DD")
        : "";
      this.params.pay_time_etime = this.timedate[1]
        ? dayjs(this.timedate[1]).format("YYYY-MM-DD")
        : "";
      this.getData();
    },

    showAll(e) {
      if (e) {
        let downList = document.querySelectorAll(
          ".ivu-select-dropdown-list .ivu-select-item"
        );
        downList.forEach((item) => {
          item.style.display = "block";
        });
      }
    },
    //切换page
    changePage(index) {
      this.params.current = index;
      this.getData();
    },
    changepageSize(val) {
      this.params.size = val;
      this.getData();
    },
    sortChange(e) {
      this.params.order_column = e.key.replace(/_str$/, "");
      this.params.order_sort = e.order;
      this.getData();
    },

    getData() {
      this.loading = true;
      const params = {
        pay_time_stime: this.params.pay_time_stime,
        pay_time_etime: this.params.pay_time_etime,
        keywords: this.params.keywords,
        spoker_id: this.params.spoker_id,
        order_column: this.params.order_column,
        order_sort: this.params.order_sort,
        pageSize: this.params.size,
        page: this.params.current,
      };
      feeList(params)
        .then((res) => {
          this.spokerList = res.condition.spoker_arr;
          this.list = res.list.list;
          this.total = res.list.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    searchData() {
      this.params.current = 1;
      this.getData();
    },
  },
};
</script>
